<template>
  <a-row>
    <a-col :xs="24" :md="12" :style="{height: '350px'}">
      <vue-cropper
        ref="cropper"
        :img="options.img"
        :info="true"
        :autoCrop="options.autoCrop"
        :autoCropWidth="options.autoCropWidth"
        :autoCropHeight="options.autoCropHeight"
        :fixedBox="options.fixedBox"
        @realTime="realTime"
      >
      </vue-cropper>
    </a-col>
    <a-col :xs="24" :md="12" :style="{height: '350px'}">
      <div class="avatar-upload-preview">
        <img :src="previews.url" :style="previews.img"/>
      </div>
    </a-col>
  </a-row>
</template>

<script>

import ARow from 'ant-design-vue/es/grid/Row'
import { VueCropper } from 'vue-cropper'

export default {
  name: 'Cardview',
  components: {
    ARow,
    VueCropper
  },
  data() {
    return {
      description: '',
      spinning:false,
      //数据集
      dataSource: [{
        key:0,
        fileDetails:[
          {
            imgUrl:"https://static.jeecg.com/upload/test/3a4490d5d1cd495b826e528537a47cc1.jpg"
          },
          {
            imgUrl:"https://static.jeecg.com/temp/国炬软件logo_1606575029126.png"
          },
          {
            imgUrl:"https://static.jeecg.com/temp/国炬软件logo_1606575029126.png"
          },
          {
            imgUrl:"https://static.jeecg.com/temp/国炬软件logo_1606575029126.png"
          },
          {
            imgUrl:"https://static.jeecg.com/temp/国炬软件logo_1606575029126.png"
          },
          {
            imgUrl:"https://static.jeecg.com/temp/国炬软件logo_1606575029126.png"
          },
          {
            imgUrl:"https://static.jeecg.com/temp/国炬软件logo_1606575029126.png"
          },
          {
            imgUrl:"https://static.jeecg.com/temp/国炬软件logo_1606575029126.png"
          },
          {
            imgUrl:"https://static.jeecg.com/temp/国炬软件logo_1606575029126.png"
          },
          {
            imgUrl:"https://static.jeecg.com/temp/国炬软件logo_1606575029126.png"
          },
          {
            imgUrl:"https://static.jeecg.com/temp/国炬软件logo_1606575029126.png"
          },
          {
            imgUrl:"https://static.jeecg.com/temp/国炬软件logo_1606575029126.png"
          },
          {
            imgUrl:"https://static.jeecg.com/temp/国炬软件logo_1606575029126.png"
          },
          {
            imgUrl:"https://static.jeecg.com/temp/国炬软件logo_1606575029126.png"
          },
          {
            imgUrl:"https://static.jeecg.com/temp/国炬软件logo_1606575029126.png"
          },
          {
            imgUrl:"https://static.jeecg.com/temp/国炬软件logo_1606575029126.png"
          }
        ]
      },{
        key:1,
        fileDetails:[
          {
            imgUrl:"https://static.jeecg.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg"
          },
          {
            imgUrl:"https://static.jeecg.com/upload/test/1_1588149743473.jpg"
          }
        ]
      }
      ],
      url: {
      }
    }
  },
  created() {
  },
  methods: {
  }
}
</script>
<style scoped>
.table-operator {
  margin-bottom: 10px
}

.clName .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle {
  width: 10px !important;
}

.clName .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
  background-color: #1890FF !important;
}
.meta{
  margin-top: 10px;
  margin-bottom: 10px;
}
.meta p{
  font-size: 12px;
  line-height: 20px;
  margin-bottom:0px
}
.log-head {
  overflow: hidden;
  background: #ffffff;
  padding-left: 30px;
}
.log-head li {
  width: 235px;
  height: 110px;
  background: #f6f8f9;
  border-radius: 4px;
  text-align: center;
  padding: 30px 0;
  font-family: PingFangSC-Regular;
  margin-right: 20px;
  box-sizing: border-box;
}
.log-head li h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
}
.log-head li p {
  color: rgba(9,34,53,.5);
  line-height: 24px;
}
ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
  list-style: none;
}
.fl {
  float: left;
}
</style>